<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/register.png}">
		<meta charset="utf-8" />
		<title>新用户注册</title>
		<link rel="stylesheet" type="text/css" th:href="@{/css/register.css}" href="css/register.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"  href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" href="css/footer.css"/>
		<link rel="stylesheet" type="text/css" th:href="@{/administration/layui/layui.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/css/drag.css}" />
		<style type="text/css">
			.slidetounlock{
				font-size: 12px;
				background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
				-webkit-background-clip:text;
				-webkit-text-fill-color:transparent;
				-webkit-animation:slidetounlock 3s infinite;
				-webkit-text-size-adjust:none
			}
			@-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}
		</style>
	</head>
	</head>

	<body>
	<div th:replace="head::topbar"></div>
		<div class="bg">
				<div class="banner">
				</div>

				<div  class="container part1">
					<div class="container2">
					<div class="header fl">
						<div class="phoneResiter fl">
							<a id="tel_tel" href="#">手机号注册</a>
						</div>
						<div class="emailResiter fl">
							<a id="tel_email" href="#">邮箱注册</a>
						</div>
						<div class="loginResiter fl">
							<a th:href="@{/customer/login}">直接登陆</a>
						</div>
						<div class="clear">

						</div>

					</div>
					<div class="clear">

					</div>

					<div>

					</div>
					<!-- 手机短信注册	-->
					<form action="/customerLogin/phoneRegister" class="registerform" method="post">
						<div class="input_box">
							<div class="left fl">
								<img th:src="@{/img/img-29.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input id="telephone" class="num" type="text" name="customerPhone"  placeholder="请输入手机号" value="" datatype=" /^0?(13|14|15|17|18|19)[0-9]{9}$/" nullmsg="请输入手机号" errormsg="手机号格式错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<!--滑块-->
						<div class="jigsaw">
							<!--	<div class="right fl">
                                    <img th:src="@{/img/img-19.png}" />
                                </div>
                                <div class="text fl">
                                向右滑动滑块填充拼图
                                </div>
                                <div class="clear">

                                </div>-->
							<div id="wrapper">
								<div id="drag">
									<div class="drag_bg"></div>
									<div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
										请按住滑块，拖动到最右边
									</div>
									<div class="handler handler_bg"></div>
								</div>
							</div>
						</div>
						<!--滑块-->
						<div class="code">
							<input type="tel" class="fl" maxlength="6" placeholder="请输入短信验证码" name="phoneCode" data-max-length="6">
							<div class="getcode fl">
								<button id="getCode" style="background-color: #b4a078" class="layui-btn layui-btn-normal"><a href="javascript:void(0);" class="tabfocus getsmscode" id=" authenticationCode">获取验证码</a></button>
							</div>
							<button class="btn success" style="display: none" id="btn_time">123</button>
							<div class="code_img">
								<img th:src="@{/img/img-142.jpg}"/>
								<span>换一张</span>
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="input_box2">
							<div class="left2 fl">
								<img th:src="@{/img/img-30.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input class="pass" type="password" placeholder="请输入密码" value="" datatype="*6-15" id="passwordold" name="customerPassword" nullmsg="请输入密码" errormsg="密码错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="Validform_checktip"></div>
						<div class="login_box">
<!--							<a id="submitBtn" tabindex="8" class="u-loginbtn btncolor tabfocus" href="personal-center.html">注 册</a>-->
							<input type="submit" style="width: 100%;cursor: pointer;height: 58px; color: white; background-color: #b4a078;border: none" tabindex="8"  th:value="注册">
						</div>
					</form>

					<div class="footer">
						我同意
						<a href="#">《服务条款》</a>和
						<a href="#">《网易隐私政策》</a>
					</div>
				</div>
			</div>
			<div class="container part2">
				<div class="container2">
					<div class="header fl">
						<div class="phoneResiter fl">
							<a id="email_tel" href="#">手机号注册</a>
						</div>
						<div class="emailResiter fl">
							<a id="email_email" href="#">邮箱注册</a>
						</div>
						<div class="loginResiter fl">
							<a th:href="@{/customer/login}" href="login.html">直接登陆</a>
						</div>
						<div class="clear">

						</div>

					</div>
					<div class="clear">

					</div>

					<div>

					</div>
					<!-- 邮件注册 -->
					<form action="/customerLogin/emailRegister" class="registerform" method="post">
						<div class="input_box">
							<div class="left fl">
								<img th:src="@{/img/img-29.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input id="email" class="stringEmail" type="text" name="customerEmail"  placeholder="请输入邮箱" value="" datatype="/^\w+@[a-z0-9]+\.[a-z]{2,4}$/" nullmsg="请输入邮箱" errormsg="邮箱格式错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<!--滑块-->
						<div class="jigsaw">
							<!--	<div class="right fl">
                                    <img th:src="@{/img/img-19.png}" />
                                </div>
                                <div class="text fl">
                                向右滑动滑块填充拼图
                                </div>
                                <div class="clear">

                                </div>-->
							<div id="wrapper1">
								<div id="drag1">
									<div class="drag_bg"></div>
									<div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
										请按住滑块，拖动到最右边
									</div>
									<div class="handler handler_bg"></div>
								</div>
							</div>
						</div>
						<!--滑块-->
						<div class="code">
							<input type="tel" class="fl" maxlength="6" placeholder="请输入邮箱验证码" id="email" name="emailCode" data-max-length="6">
							<div class="getcode fl">
								<button id="get_email_code" style="background-color: #b4a078" class="layui-btn layui-btn-normal"><a href="javascript:void(0);"class="tabfocus get_email_code" id="authenticationCode">获取验证码</a></button>
							</div>
							<div class="code_img">
								<img th:src="@{/img/img-142.jpg}"/>
								<span>换一张</span>
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="input_box2">
							<div class="left2 fl">
								<img th:src="@{/img/img-30.png}" />
							</div>

							<div class="line2 fl">

							</div>
							<div class="tel fl">
								<input class="pass" type="password" placeholder="请输入密码" value="" datatype="*6-15" id="passwordold" name="customerPassword" nullmsg="请输入密码" errormsg="密码错误" />
							</div>
							<div class="clear">

							</div>
						</div>
						<div class="Validform_checktip"></div>
						<div class="login_box">
							<!--							<a id="submitBtn" tabindex="8" class="u-loginbtn btncolor tabfocus" href="personal-center.html">注 册</a>-->
							<input type="submit" style="width: 100%;height: 58px; color: white; background-color: #b4a078;border: none" tabindex="8"  th:value="注册">
						</div>
					</form>
					<div class="footer">
						我同意
						<a href="#">《服务条款》</a>和
						<a href="#">《网易隐私政策》</a>
					</div>
				</div>
			</div>
		</div>
		<div th:replace="footer::#footbar"></div>
		<script th:src="@{/js/jquery-1.12.4.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js"></script>
		<script th:src="@{/js/Validform_v5.3.2_min.js}" src="js/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"  ></script>
		<script type="text/javascript" th:src="@{/js/drag.js}"></script>
<!--	-->
		<script  type="text/javascript">
			// $("form").Validform({
			// 	tiptype: 3,
			//
			// });
			$("#drag").drag();
			$("#drag1").drag();
			$(".emailResiter a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})
			$(".loginResiter a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#333")
			})
			$(".footer a").hover(function() {
				$(this).css("color", "#B4A078")
			}, function() {
				$(this).css("color", "#999999")
			})

			$(".num").change(function() {

				var reg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
				var flag = reg.test($(".num").val());
				if(flag) {
					$(".input_box").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box").css("border", "1px solid red");
				}

			})
			$(".pass").change(function() {

				var reg = /^[a-zA-Z0-9]{6,18}$/;
				var flag = reg.test($(".pass").val());
				if(flag) {
					$(".input_box2").css("border", "1px solid #e8e8e8");
				} else {
					$(".input_box2").css("border", "1px solid red");
				}

			})
			$(".login_box a").click(function (e) {
				var reg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
				var flag1 = reg.test($(".num").val());
				var reg = /^[a-zA-Z0-9]{6,18}$/;
				var flag2 = reg.test($(".pass").val());
				if (flag1&&flag2) {
					window.location.href="personal-center.html";
					
				} else{
					e.preventDefault();
					$(".input_box").css("border", "1px solid red");
					$(".input_box2").css("border", "1px solid red");
				}
			})
			$(".phoneResiter a").click(function () {
				$(".part2").css("display", "block");
				$(".part1").css("display", "none");

			})
			$(".emailResiter a").click(function () {
				$(".part2").css("display", "none");
				$(".part1").css("display", "block");
			})

            //获取手机号
			$(".getsmscode").click(function () {

				// $(".code_img img").css("display","block");
				// $(".code_img span").css("display","block");
				console.log($(".getsmscode").val())
				dd();
				$("#getCode").attr("class","layui-btn layui-btn-disabled")
				$(".code_img img").css("opacity","0.2");
			})

			function dd(){
				//获取二维码的ajax方法
				$(function(){
					//获取前端输入的手机号//请求参数
					var telephoneCode = $("#telephone").val();
					//alert(telephoneCode)
					if(telephoneCode == ''){
						layer.msg("请输入手机号码")
						return;
					}else{
						cTime(35)
                        //
                        $.ajax({
                            //请求方式
                            type : "GET",
                            //请求的媒体类型
                            contentType: "application/json;charset=UTF-8",
                            //请求地址
                            url : "/customerLogin/registerMessage?phone="+telephoneCode,
                            //请求成功
                            success : function(result) {
                                console.log(result);
                            },
                            //请求失败，包含具体的错误信息
                            error : function(e){
                                console.log(e.status);
                                console.log(e.responseText);
                            }
                        });
                    }
				});
			}
			function cTime(i) {
				i--;
				if(i==0){
					$(".getsmscode").text("获取验证码");
				}
				else{
					$(".getsmscode").attr("href","#");
					$(".getsmscode").text("("+i+")秒后操作");
					setTimeout("cTime("+i+")",1000)
				}
			}



			//邮箱
			$(".get_email_code").click(function () {

				// $(".code_img img").css("display","block");
				// $(".code_img span").css("display","block");
				dd_email();
				$("#get_email_code").attr("class","layui-btn layui-btn-disabled")
			})

			function dd_email(){

				//获取二维码的ajax方法
				$(function(){
					//获取前端输入的手机号//请求参数
					var email = $("#email").val();
					//alert(email);
					if(email == ''){
						alert("请输入邮箱")
						return;
					}else{
						c_time(35)
						//
						$.ajax({
							//请求方式
							type : "GET",
							//请求的媒体类型
							contentType: "application/json;charset=UTF-8",
							//请求地址
							url : "/customerLogin/email?email=" +email,
							//请求成功
							success : function(result) {
								console.log(result);
								if (result=="error"){
									layer.msg("验证码错误，请重新输入")
								}else if(result=="exist"){
									layer.msg("用户已存在，请重新输入")
								}
							},
							//请求失败，包含具体的错误信息
							error : function(e){
								console.log(e.status);
								console.log(e.responseText);
							}
						});
					}
				});
			}
			function c_time(i) {
				i--;
				if(i==0){
					$(".get_email_code").text("获取验证码");
				}
				else{
					$(".get_email_code").attr("href","#");
					$(".get_email_code").text("("+i+")秒后操作");
					setTimeout("c_time("+i+")",1000)
				}
			}


		</script>
		<script type="text/javascript" th:inline="javascript">
			$(document).ready(
					function () {
						//alert([[${msg}]])
						if([[${msg}]]=="error") {
							layer.msg("验证码错误，请重新输入")
						}else if([[${msg}]]=="exist"){
							layer.msg("用户已存在，请重新输入")
						}
					}
			)
		</script><script type="text/javascript" th:inline="javascript">
			$(document).ready(
					function () {
						//alert([[${msg}]])
						if([[${msg}]]=="error") {
							layer.msg("验证码错误，请重新输入")
						}else if([[${msg}]]=="exist"){
							layer.msg("用户已存在，请重新输入")
						}
					}
			)
		</script>
		</body>

</html>